<!DOCTYPE html>
<html>
	<head>
		<title>CSS Reftest Reference</title>
		<link rel="author" title="Mihai Balan" href="mibalan@adobe.com">
		<style>
		ol {
			list-style-type: none;
			counter-reset: items 0;
		}
		ol>li {
			counter-increment: items;
		}
		li::before {
			content: counter(items) ". ";
			display: inline-block;
			width: 1.5em;
			margin-right: .3em;
			text-align: right;
		}

		ol.double>li {
			counter-increment: items 2;
		}
		ol.double>li::before {
			content: counter(items, upper-latin) ". ";
		}

		ol.down-ten {
			counter-reset: items 11;
		}
		ol.down-ten>li {
			counter-increment: items -1;
		}
		ol.down-ten>li::before {
			content: counter(items, upper-roman) ". ";
			width: 2em;
		}

		.region {
			background-color: lightgray;
			margin: 1em;
			float: left;
			width: 18em;
			height: 15em;
		}
		</style>
	</head>
	<body>
		<p>The test passes if there are three gray rectangles as follows:<br>
			1. the first one contains a numbered, 4 items list<br>
			2. the second contains two numbered, 3 items lists &ndash; each list uses letters for numbering, starting with 'B.' and skipping every other letter (<em>e.g.</em> B, D, F)<br>
			3. the last rectangle contains a descending numbered list: it's numbered using roman numerals, starting at X (10), in decreasing order; after the second item there's an inner numbered list with 2 items, again descendingly numbered with roman numerals, starting at 10; finally, before the last item there's another inner numbered list with 2 items, labeled with letters, more precisely, the letters B and D</p>
		<div class="region" id="region1">
			<ol id="list1">
				<li>First list, item 1</li>
				<li>First list, item 2</li>
				<li>First list, item 3</li>
				<li>First list, item 4</li>
			</ol>
		</div>
		<div class="region" id="region2">
			<ol id="list21" class="double">
				<li>List 2-1, item B</li>
				<li>List 2-1, item D</li>	
				<li>List 2-1, item F</li>
			</ol>
			<ol id="list22" class="double" start="4">
				<li>List 2-2, item B</li>
				<li>List 2-2, item D</li>
				<li>List 2-2, item F</li>
			</ol>
		</div>
		<div class="region" id="region3">
			<ol id="list31" class="down-ten">
				<li>Outer list, item X</li>
				<li>Outer list, item IX
					<ol class="down-ten">
						<li>Inner list 1, item X</li>
						<li>Inner list 1, item IX</li>
					</ol>
				</li>
				<li>Outer list, item VIII</li>
				<li>Outer list, item VII</li>
				<li>Outer list, item VI
					<ol class="double">
						<li>Inner list 2, item B</li>
						<li>Inner list 2, item D</li>
					</ol>
				</li>
				<li>Outer list, item V</li>
			</ol>
		</div>
	</body>
</html>